<template>
	<view class="container">
		<view class="monBox">
			<image class="monImg" src="../../static/images/00.svg" mode=""></image>
			<view :class="['dialogue item0',seli.indexOf(0) !=-1?'act-left':'']" @click="selectTap(0)">言语</view>
			<view :class="['dialogue item1',seli.indexOf(1) !=-1?'act-right':'']" @click="selectTap(1)">平衡</view>
			<view :class="['dialogue item2',seli.indexOf(2) !=-1?'act-left':'']" @click="selectTap(2)">震颤</view>
			<view :class="['dialogue item3',seli.indexOf(3) !=-1?'act-right':'']" @click="selectTap(3)">迟缓</view>
			<view :class="['dialogue item4',seli.indexOf(4) !=-1?'act-left':'']" @click="selectTap(4)">步态</view>
			<view :class="['dialogue item5',seli.indexOf(5) !=-1?'act-right':'']" @click="selectTap(5)">僵硬</view>
		</view>
		<view class="tac">请选择以上症状并开始测试（可多选）</view>
		<view class="mt60 btn" @click="startTest">开始测试</view>

		<!-- 提示 -->
		<view class="mask" v-if="showMask">
			<view class="box p30 centered w75">
				<view class="h76 tac fwb">说明</view>
				<view class="f32 c3">
					<view class="">该项功能用于帕金森病运动症状的客观评估，包括震颤、僵直、运动迟缓、步态和平衡。测试结果可用于神经专科医生的辅助诊疗，以及患者了解自身症状的状态、药物改善率和疾病进展。
					</view>
					<view class="">居家自测时：请结合您自身的症状表现，在服药前或者服药后，对某些症状进行选择性的测试；也可以定期（每1个或3个月）进行完整测试。</view>
					<view class="">医院就诊时：请遵照神经专科医生医嘱进行测试。</view>
				</view>
			</view>
			<view class="btn maskBtn" @click="this.showMask = false">已知晓</view>
		</view>
	</view>
</template>

<script>
	import Audio from '../../core/audio.js'
	export default {
		name: "",
		data() {
			return {
				seli: [],
				monArr: [
					['1'],
					['2-1', '2-2'],
					['3-1-L', '3-1-R', '3-2-L', '3-2-R'],
					['4-1-L', '4-1-R', '4-2-L', '4-2-R', '4-3-L', '4-3-R'],
					['5']
				],
				showMask: true,
				showBtns: 0
			}
		},
		onLoad() {
			Audio.audio('monitorHome', function() {})
		},
		methods: {
			startTest() {
				if (this.seli.length < 1) {
					uni.showToast({
						title: "请选择症状",
						icon: "none"
					})
					return false;
				}
				let arr = [];
				this.seli.forEach(item => {
					arr = [].concat(arr, this.monArr[item])
				})
				this.seli = [];
				this.$routeJump.navigateTo('/plugins/monitoringdetail/index?typeArr=' + arr);
			},
			// 提交数据
			async upData() {
				let _this = this;
				let sample = uni.getStorageSync('sample');
				let voicePath = uni.getStorageSync('voicePath');

				let {
					res,
					err
				} = await _this.$utils.request({
					url: "/patient/symptom_monitor/",
					method: "POST",
					data: sample
				})
				let keys = Object.key(voicePath);
				let newDate = {};
				keys.forEach(item => {
					let name = res.data.id + item;
					newDate = Object.assign(newDate, {
						[name]: voicePath[item]
					})
				})
				_this.$utils.request({
					url: "/patient/symptom_voice/" + res.data.id,
					method: "POST",
					data: newDate
				}).then(res => {
					console.log(res)
				})

			},
			selectTap(i) {
				if(i == 5){
					uni.showToast({
						title:"功能开发中...",
						icon:"error"
					})
					return false;
				}
				
				let index = this.seli.indexOf(i);
				if (index == -1) {
					this.seli.push(i);
				} else {
					this.seli.splice(index, 1)
				}
				console.log(this.seli);
			},
			toPath(url) {
				this.showBtns = 0;
				Audio.audioCtx.stop();
				Audio.audioCtx.destroy();
				this.$routeJump.navigateTo(url);
			}
		},
		onUnload() {
			Audio.audioCtx.stop();
			Audio.audioCtx.destroy();
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		padding-top: 100rpx;
	}
	.act-left {
		color: #fff;
		background-image: url(../../static/images/left-sel.png) !important;
	}
	
	.act-right {
		color: #fff;
		background-image: url(../../static/images/right-sel.png) !important;
	}
	.monBox {
		width: 600rpx;
		margin: 0 auto 0;
		text-align: center;
		position: relative;

		.monImg {
			width: 220rpx;
			height: 700rpx;
		}
		.dialogue {
			width:  150rpx;
			height: 86rpx;
			text-align: center;
			line-height: 64rpx;
			background-size: 100% 100%;
			background-repeat: no-repeat;
		}
		
		

		.item0{
			background-image: url(../../static/images/left.png);
		
			@include absolute(30rpx,95rpx,0,0)
			
		}
		.item1{
				background-image: url(../../static/images/right.png);
			@include absolute(80rpx,370rpx,0,0)
		}
		.item2{
			background-image: url(../../static/images/left.png);
			@include absolute(380rpx,60rpx,0,0)
		}
		.item3{
			background-image: url(../../static/images/right.png);
			@include absolute(450rpx,410rpx,0,0)
		}
		.item4{
			background-image: url(../../static/images/left.png);
			@include absolute(530rpx,80rpx,0,0)
		}
		.item5{
			background-image: url(../../static/images/right.png);
			@include absolute(290rpx,370rpx,0,0)
		}
	}
	.btn{
		width: 180rpx;
		height: 76rpx;
		line-height: 76rpx;
		text-align: center;
		margin: 60rpx auto;
		background-color: #a61b32;
		border-radius: 16rpx;
	}
	.maskBtn{
		width: 60%;
		height: 76rpx;
		background-color: $uni-theme-color;
		line-height: 76rpx;
		@include absolute( 85%,50%,-50%,-50%)
	}
	
</style>
